<template>
	<view>
		<navBar title="手机号码"></navBar>
		<view class="top-bg"></view>
		<view class="content">
			<view class="title">{{phoneNumber ? '当前绑定手机号' : '绑定手机号' }}</view>
			<view class="phone" v-show="phoneNumber">{{(phoneNumber || '').replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</view>
			<view class="input-panel">
				<image class="icon" :src="bg_image.username"></image>
				<input class="input" type="number" v-model="form.phoneNumber" placeholder="请输入手机号" />
			</view>
			<view class="error" v-show="showError">请输入正确的手机号</view>
			<view class="input-panel" style="padding-right: 0;">
				<image class="icon" :src="bg_image.password"></image>
				<view class="input-panel-right">
					<input class="input" type="password" v-model="form.code" placeholder="请输入验证码" />
					<view class="code" @click="$u.throttle(getCode, 1000)" >{{ tips }}</view>
					<u-verification-code :seconds="seconds"  ref="uCode"
							@change="codeChange"></u-verification-code>
				</view>
			</view>
			<view class="sure" @click="handleSure">确定修改</view>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import bindphone from './js/bindphone'
	
	export default {
		components: {
		  
		},
		...bindphone 
	}
</script>

<style lang="less" scoped>
	@import url('./css/bindphone.less');
</style>